<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    dialog-width="600px"
    :page-show="pageShow"
    @dialog-close="dialogClose"
  >
    <template #toolPanel />
    <template #searchPanel>
      <search-panel :show-add-button="true" :show-search-button="true"  @search="search" @insert="handleDataInsert" :left="true">
            <el-form-item label="通道类型:">
              <el-select v-model="filters.operatoruid" clearable placeholder="请选择通道类型">
                <el-option value="0" label="全部">全部</el-option>
                <el-option
                  v-for="item in operas"
                  :key="item.operatoruid"
                  :label="item.operatorname"
                  :value="item.operatoruid">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="通道名称:">
              <el-input v-model="filters.baseName" style="width: 200px" clearable placeholder="通道名称" />
            </el-form-item>
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :current="start"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="150"
      >
        <template #action="{row}">
          <el-button size="small" round  @click="editRow(row)">编辑</el-button>
          <el-button size="small" round  style="color:red;" @click="deleteChannel(row)">删除</el-button>
        </template>
      </data-table>
    </template>

    <template #dialog>
      <el-form ref="form" :model="form" label-width="100px" style="display: inline-block"  :hide-required-asterisk="true" :show-message="false">
        <el-form-item label="通道类型" prop="operatoruid">
          <el-select v-model="form.operatoruid" style="width: 450px;"  placeholder="请选择通道类型">
            <el-option
              v-for="item in operas"
              :key="item.operatoruid"
              :label="item.operatorname"
              :value="item.operatoruid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item required label="通道名称" prop="baseName">
          <el-input v-model="form.baseName" auto-complete="off" style="width: 450px;" placeholder="如移动1元权益"></el-input>
        </el-form-item>
        <el-form-item label="包含权益:" prop="flow" style="display: inline-block">
          <el-input maxlength="20"  v-model="form.flow" placeholder="权益单位元" style="width: 450px;"></el-input>
        </el-form-item>
        <el-form-item label="基础售价:"  prop="basePrice">
          <el-input  maxlength="200"  v-model="form.basePrice" style="width: 450px;" placeholder="配置初始售价,不作为产品真实售价"></el-input>
        </el-form-item>
      </el-form>
      <el-row style="text-align: center;">
        <el-button size="small" @click="dialogVisible = false" round>取 消</el-button>
        <el-button  size="small" round type="primary" @click="onSubmit">保存</el-button>
      </el-row>
    </template>

  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import DialogDataForm from './components/DialogDataForm'
import { findPageChannel,findPageOperator,addChannel,updateChannel,findAllChannel,findByChannel,deleteChannel} from '@/api/utilsapi'


export default {
  name: 'cardKind',
  components: { DialogDataForm },
  mixins: [
    baseMixin({
      idName: 'id',
      findData: findPageChannel,
      refresh: '',
      format(res) {
        return res.map(data => {
          return data
        })
      }
    })
  ],
  data() {
    return {
      buttons: [],
      operas: [],
      pageShow: true,
      dialogData:{},
      tableColumnAttributes: [
        { name: '通道类型', value: 'operatorname' ,formatter:this.operatornameFormatter},
        { name: '通道名称', value: 'baseName' },
        { name: '包含权益', value: 'flow' , formatter: this.flowFormatter},
        { name: '基础售价', value: 'basePrice' },
        { name: '创建时间', value: 'createtime'},
      ],
      filters: {
        baseName:'',
        operatoruid: "",
      },
      form: {
        baseName:'',
        operatoruid:'',
        phonenum:"",
        userstatus:'',
        remark:''
      }
    }
  },
  methods: {
    async search(form){
      let para = {
        baseName: this.filters.baseName,
        start: 0,
        pageSize: 10,
        operatoruid: this.filters.operatoruid == '0' ? "" : this.filters.operatoruid,
      };
      this.searchOptions = para;
      this.setTableData()
    },
    flowFormatter: function (row, column){
      return (row.flow+'权益');
    },
    operatornameFormatter(row, column){
      return row.operatorsBase.operatorname;
    },
    async findPageOperator(){
      let para = {
        start: 0 ,
        pageSize:100,
        operatorname: '',
      };
      const datas = await findPageOperator(para);
      if(datas.data){
        this.operas = datas.data.result;
      }
    },
    async onSubmit(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {roundButton:true}).then(async () => {
            let para = Object.assign({}, this.form);
            if(para.baseId){
              const datas = await updateChannel(para);
              this.resultApply(datas);
              this.$refs['form'].resetFields();
            }else{
              const datas = await addChannel(para);
              this.resultApply(datas);
              this.$refs['form'].resetFields();
            }
            this.search();
          });
        }
      });
    },
    async deleteChannel(row){
      this.$confirm('确认删除吗？', '提示', {roundButton:true}).then(async () => {
        let para = Object.assign({}, row);
        if(para.baseId){
          const datas = await deleteChannel(para);
          this.resultApply(datas);
          this.search();
        }
      });
    }
  },
  mounted() {
    this.findPageOperator();
  }
}
</script>
